<ix-modal-header
  [title]="'Widget Editor' | translate"
></ix-modal-header>
<form class="ix-form-container" (submit)="$event.preventDefault(); onSubmit()">
  <ix-fieldset>
    <div class="form-row">
      <ix-icon-group
        class="layout-control"
        [formControl]="layoutControl"
        [options]="layoutOptions"
        [label]="'Layout' | translate"
      ></ix-icon-group>
    </div>
  </ix-fieldset>

  <div class="editor-container">
    <ix-widget-editor-group
      [group]="group()"
      [selectedSlot]="selectedSlot().slotPosition"
      [validationErrors]="validationErrors()"
      (selectedSlotChange)="selectedSlotChanged($event)"
    ></ix-widget-editor-group>
  </div>

  @if (selectedSlot()) {
    <ix-widget-group-slot-form
      #widgetGroupSlotForm
      [slotConfig]="selectedSlot()"
      (validityChange)="updateSlotValidation($event)"
      (settingsChange)="updateSlotSettings($event)"
    ></ix-widget-group-slot-form>
  }

  <ix-form-actions>
    <button
      mat-button
      type="submit"
      color="primary"
      [ixTest]="['add-widget-group-btn']"
      [disabled]="settingsHasErrors() || layoutControl.invalid"
    >{{ 'Save' | translate }}</button>
    <button
      mat-button
      type="button"
      [ixTest]="['cancel-add-widget-group-btn']"
      (click)="slideInRef.close({ response: false, error: null })"
    >{{ 'Cancel' | translate }}</button>
  </ix-form-actions>
</form>
